<template>
  <div class="index">
    <div class="header">
      <div class="left">
        <el-select v-model="value" placeholder="请选择" style="margin-right:2%" @change="select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input v-model="input" placeholder="请输入关键字" style="margin-right:2%" />
        <el-button size="medium" @click="search">搜索</el-button>
      </div>
      <div class="right">
        <el-button v-if="role!='student'" type="primary" size="small" icon="el-icon-setting" @click="adminAction">措施管理</el-button>
        <el-button v-else type="primary" size="small" icon="el-icon-setting" @click="studentAction">措施管理</el-button>
        <el-button v-show="role!='student'" type="primary" size="small" icon="el-icon-data-analysis" @click="statistic">统计分析</el-button>
      </div>
    </div>
    <div v-loading="listLoading" class="content">
      <div v-for="(item,index) in crop" :key="index" class="card" @click.prevent="enterCard(item.cropId,item.cropName)">
        <div style="width:100%">
          <div v-show="role!='student'" class="top">
            <el-checkbox v-model="checked[index]" @click.stop.native="check" />
          </div>
        </div>
        <div class="middle">
          <div class="img"><img :src="item.url"></div>
        </div>
        <div class="foot">{{ item.cropName }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getListwithUrl } from '@/api/Crop'
import { addStudent } from '@/api/user'
export default {
  name: 'Trainningindex',
  data() {
    return {
      role: '', // 当前角色
      options: [ // 选择框中的数据
        {
          value: '',
          label: '全部作物'
        }],
      value: '', // 选择框选中的值
      input: '', // 输入框中的值
      crop: [], // 存放作物列表，不包含checked
      checked: [], // 多选框选中状态
      listLoading: true
    }
  },
  created() {
    this.role = this.$store.getters.roles;
    console.log(this.role)
    getListwithUrl().then(res => {
      this.crop = res.data
      this.listLoading = false;
      this.options = [{
          value: '',
          label: '全部作物'
        }]
      for (let i = 0; i < this.crop.length; i++) {
        this.options.push({ value: `${this.crop[i].cropName}`, label: `${this.crop[i].cropName}` })
        this.checked[i] = false// 初始化多选框状态为false
      }
    })
  },
  methods: {
    adminAction() {
      console.log('管理员进入措施管理页面')
      this.$router.push('/trainning/index/manage')
    },
    studentAction() {
      console.log('学生进入措施管理页面')
      this.$router.push('/trainning/studentManage')
    },
    enterCard(cropId, cropName) {
      console.log('进入谷物详情页面')
      this.$store.dispatch('user/setCrop', { cropName })
      if (this.role !== 'student') { // 进入管理员看到的第一层页面
        this.$router.push(`/trainning/cropdetail/${cropId}`)// 进入全校的一个数据页面，也就是以班级为整体->个人->个人详情
      } else {
        this.$router.push(`/trainning/persondata/${cropId}/-1`)
        // 进入个人的，也就是自己的数据记录
      }
    },
    statistic() { // 进入统计分析页面
      const ids = []
      for (let i = 0; i < this.checked.length; i++) {
        if (this.checked[i]) {
          ids.push(this.crop[i].cropId)
        }
      }
      if (ids.length) {
        this.$router.push(`/trainning/statistic/${ids}`)
      } else {
        this.$message({
          type: 'warning',
          message: '请至少选择一项!'
        })
      }
    },
    check() {
      // console.log(this.checked);

    },
    getListwithUrl(query) {
      getListwithUrl(query).then(res => {
        this.crop = res.data
        this.listLoading = false;
        this.options = [{
          value: '',
          label: '全部作物'
        }]
        for (let i = 0; i < this.crop.length; i++) {
          this.options.push({ value: `${this.crop[i].cropName}`, label: `${this.crop[i].cropName}` })
          this.checked[i] = false// 初始化多选框状态为false
        }
      })
    },
    select(value) {
      console.log(value)
      const query = {
        cropName: value
      }
      this.listLoading = true
      this.getListwithUrl(query)
    },
    search() {
      const query = {
        cropName: this.input
      }
      this.listLoading = true
      this.getListwithUrl(query)
    }
  }
}
</script>
<style scoped>
  .header{
    display: flex;
    justify-content: space-between;
  }
  .left{
    display: flex;
    justify-content: flex-start;
  }
  .content{
    margin-top: 2%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }
  .card{
    width: 15%;
    height: 180px;
    border: 1px solid #ccc;
    cursor: pointer;
    margin: 2%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .top{
    margin-top: 2%;
    float: right;
    margin-right: 3%;
  }
  .middle{
    display: flex;
    flex-direction: column;
    align-items: center;
    clear: both;
  }
  .img{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: blue;
    overflow: hidden;
  }
  .img img{
    width: 100%;
    height: 100%;
  }
  .foot{
    margin-top: 4%;
    text-align: center;
    font-size: 14px;
  }
</style>
